<template>
   <div class=''>
        <van-dropdown-menu>
            <van-dropdown-item disabled title="综合" v-model="value1" />
            <van-dropdown-item title="价格" v-model="value2" :options="option1" 
            @change="priceChange"/>
            <van-dropdown-item title="分类" v-model="categoryVal" :options="filterCategory" 
            @change="categoryChange"/>
        </van-dropdown-menu>
        <van-empty v-if="goodsList.length==0" image="search" description="描述文字" />
        <Products v-else :goodsList="goodsList"/>
   </div>
</template>

<script>
import Products from "@/components/Products.vue"
export default {
  data() {
    return {
      value1: 0,
      value2: 0,
      categoryVal: '',
      option1: [
        { text: '价格从低到高', value: "desc" },
        { text: '价格从高到低', value: "asc" },
      ],
    };
  },
  updated(){
    // 谁用页面更新生命周期，因为在父组件通过请求后数据发生了变化，如果使用挂载后 mounted需要加延迟
    // 才能生效
    this.filterCategory.map(item=>{
      if(item.checked){
        this.categoryVal = item.value
      }
    })
  },
  
  components:{
    Products
  },
  props:["filterCategory","goodsList"],
  methods:{
    categoryChange(val){
      this.$emit("categoryChange",val)
    },
    priceChange(val){
      this.$emit("priceChange",val)
    }
  }
};
</script>
<style>

</style>